<template>
    <div>
        <el-form ref="form" label-width="80px">
            <el-row :gutter="20">
                <!-- <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item label="奖励id:">
                        <el-input v-model="searchId" placeholder="请输入奖励id"
                            class="w140" size="small" clearable
                        ></el-input>
                    </el-form-item>
                </el-col> -->
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item label="茶室tid:">
                        <el-input v-model="searchTid" placeholder="请输入茶室tid"
                            class="w140" size="small" clearable
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
                    <el-form-item class="teAliLeft">
                        <el-button type="primary" @click="cliScreen" size="small" class="mr5">
                            立即筛选
                        </el-button>
                        <el-button @click="cliEmpty" size="small">
                            清空
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tempList" border class="wPer100">
            <el-table-column prop="id" label="奖励id" width="65">
            </el-table-column>
            <el-table-column prop="out_trade_no" label="订单号" width="70">
            </el-table-column>
            <el-table-column prop="amount" label="奖励金额" width="80">
            </el-table-column>
            <el-table-column label="给予奖励用户头像" width="135">
                <template slot-scope="scope">
                    <el-image :preview-src-list="[scope.row.avatar_url]"
                        style="width: 100px; height: 100px"
                        :src="scope.row.avatar_url" fit="cover"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="lower_mid" label="给予奖励用户mid" width="135">
            </el-table-column>
            <el-table-column prop="nickname" label="给予奖励用户昵称" width="135">
            </el-table-column>
            <el-table-column prop="mname" label="被奖励用户昵称" width="120">
            </el-table-column>
            <el-table-column label="直接/间接" width="85">
                <template slot-scope="scope">
                    {{ 
                        scope.row.source == 1 ? '直接' :
                        scope.row.source == 2 ? '间接' : scope.row.source
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="tid" label="茶室tid" width="70">
            </el-table-column>
            <el-table-column prop="tname" label="茶室名">
            </el-table-column>
            <el-table-column prop="date" label="奖励时间" width="160">
            </el-table-column>
        </el-table>
        <div class="floRight mt30 pb40">
            <el-pagination :current-page="currentPage" :total="total1"
                :page-sizes="[10]" :page-size="pageSize"
                background layout="prev, pager, next, total, jumper"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
<script>
import { getHomeMemberRewardList } from '@s/api'
import { imgUrl } from "@u/debounce";
export default {
    data() {
        return {
            // searchId: '',
			searchTid: '',
            currentPage: 1,
            pageSize: 10,
            tempList: [],
            total1: 0,

        }
    },
    mounted() {
        this.getDataList1();
    },
    methods: {
        getDataList1() {
            getHomeMemberRewardList({
                token: this.$store.getters.token,
                page: this.currentPage - 1,
                number: this.pageSize,
                tid: this.searchTid,
                // id: this.searchId
            }).then(res => {
                if(res.data.data.length) {
                    res.data.data.forEach(item => {
                        item.avatar_url = imgUrl + item.avatar_url;
                    })
                }
                this.tempList = res.data.data;
                this.total1 = res.data.count;
            })
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.getDataList1();
        },
        cliScreen() {
            this.currentPage = 1;
            this.getDataList1();
        },
        cliEmpty() {
            // this.searchId = '';
            this.searchTid = '';
        }
    }
}
</script>